<template>
  <a-card :bordered="false">
      <!-- table区域-begin -->
      <a-row :gutter="10">
        <a-col :md="12" :sm="24">
          <!-- <a-card :bordered="false"> -->
            <div >
              <a-form @keyup.enter.native="searchQuery">
                <a-row :gutter="12">
                  <a-col :md="12" :sm="12">
                    <a-form-item label="角色名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input placeholder="请输入角色名称" v-model="queryParam.name"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12">
                    <a-form-item>
                      <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
              <vxe-grid
                id="RoleList"
                keep-source
                ref="vxeTable"
                v-bind="gridOptions"
                :row-config="{keyField:'id',isCurrent:true}"
                :radio-config="{trigger:'row'}"
                @current-change="onCurrentChange"
              >
              <template #action="{ row }">
                <template>
                  <a @click="handleEdit(row)" >编辑</a>
                  <a-divider type="vertical" />
                  <a-dropdown>
                    <a class="ant-dropdown-link">
                      更多 <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="handleEditPerssion(row)">菜单权限</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                          <a>删除</a>
                        </a-popconfirm>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </template>
              </template>
            </vxe-grid>
          <!-- </a-card> -->
        </a-col>
        <a-col :md="12" :sm="24">
          <!-- <a-card :bordered="false"> -->
            <a-tabs default-active-key="1" style="margin-top:4px;">
              <a-tab-pane key="1" tab="已关联用户">
                <RoleWithinUserList :roleId="currentRow.id" refs="RoleWithinUserList" />
              </a-tab-pane>
              <a-tab-pane key="2" tab="已关联部门">
                <RoleWithinDeptList :roleId="currentRow.id" refs="RoleWithinDeptList" />
              </a-tab-pane>
              <a-tab-pane key="3" tab="已关联岗位">
                <RoleWithinPostList :roleId="currentRow.id" refs="RoleWithinPostList" />
              </a-tab-pane>
            </a-tabs>
          <!-- </a-card> -->
        </a-col>
      </a-row>
      <!-- table区域-end -->
      <RoleModal ref="modalForm" @ok="modalFormOk" :deptTree="dataSource" />
      <!-- 菜单权限 -->
      <perssion-modal ref="perssionModal" />
  </a-card>
</template>

<script>
import RoleModal from './modules/RoleModal'
import PerssionModal from './modules/PerssionModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import RoleWithinUserList from './modules/RoleWithinUserList'
import RoleWithinDeptList from './modules/RoleWithinDeptList'
import RoleWithinPostList from './modules/RoleWithinPostList'
import { getAction } from '@/services/manage'
export default {
  name: 'DeptList',
  components: {
    RoleModal,
    PerssionModal,
    RoleWithinUserList,
    RoleWithinDeptList,
    RoleWithinPostList
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        // { type: 'radio', width: 45 },
        { type: 'seq', width: 40 },
        {
          title: '角色名称',
          align: 'center',
          field: 'name'
        },
        {
          title: '描述',
          align: 'center',
          field: 'description'
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          align: 'center',
          width: 170
        }
      ],
      url: {
        list: '/role/page',
        delete: '/role/remove/'
      },
      currentRow: {},
      dataSource: [],
      pagerConfig: {
        layouts: ['PrevPage', 'Number', 'NextPage', 'FullJump', 'PageCount', 'Total']
      }
    }
  },
  methods: {
    handleEditPerssion: function(record) {
      this.$refs.perssionModal.show(record.id)
    },
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      const res = await getAction(this.url.list, params)
      this.loading = false
      if (res.success) {
        this.dataSource = res.result.content
        this.setCurrentData()
      }
      return res
    },
    setCurrentData() {
      this.$refs.vxeTable.clearCurrentRow()
      let currentRow
      if (Object.keys(this.currentRow).length > 0) {
        this.dataSource.forEach(item => {
          if (this.currentRow.id === item.id) {
            currentRow = JSON.parse(JSON.stringify(item))
          }
        })
      }
      !currentRow ? currentRow = this.dataSource[0] || {} : ''
      this.currentRow = Object.assign({}, currentRow)
      this.$refs.vxeTable.setCurrentRow(currentRow)
    },
    onCurrentChange({ row }) {
      this.currentRow = row
    },
    handleFilter(row) {
      this.$refs.roleDataFilterListModal.show(row)
    }
  }
}
</script>

